<template>
  <div class="app-container">
    <van-nav-bar title="详情" left-arrow @click-left="$router.back()" />
    <div class="content-box">
      <div class="card info">
        <el-scrollbar>
          <img class="banner" :src="competitionData.imageUrl" alt="">
          <div class="title">{{ competitionData.name }}</div>
          <div class="info-box">
            <div class="info-item" v-for="(item, index) in infoItemList" :key="index" :class="item.class">
              <div class="label">
                <!-- <svg-icon icon-class="date" /> -->
                {{ item.label }}
              </div>
              <div class="value">
                <!-- 赛事类型 -->
                <span v-if="item.prop == 'type'">{{ typeObj[competitionData[item.prop]] }}</span>
                <!-- 赛事级别 -->
                <span v-else-if="item.prop == 'level'">{{ levelObj[competitionData[item.prop]] }}</span>
                <!-- 状态 -->
                <span v-else-if="item.prop == 'status'">{{ statusObj[competitionData[item.prop]] }}</span>
                <!-- 报名方式 -->
                <span v-else-if="item.prop == 'mode'">{{ modeObj[competitionData[item.prop]] }}</span>
                <!-- 默认 -->
                <span v-else>{{ competitionData[item.prop] }}{{ item.unit }}</span>
              </div>
            </div>
          </div>
          <!-- <div class="price">￥{{ competitionData.price || '免费' }}</div>
          <div class="introduce-box">
            <div class="introduce-title">活动详情</div>
          </div> -->
        </el-scrollbar>
      </div>
      <div class="card register" v-if="competitionData.status == 1 || recordId">
        <!-- <div class="btn" @click="toRegister">立即报名</div> -->
        <div class="btn" @click="toRegister">{{ recordId ? '报名信息' : '立即报名' }}</div>
        <!-- <div class="btn" :class="recordId && 'disabled'" @click="toRegister">{{ recordId ? '已报名' : '立即报名' }}</div> -->
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/competitionsManger/index.js';
import { mapGetters } from 'vuex';

export default {
  name: 'ActivityRegisterDetail',
  data() {
    return {
      dataLoading: false,
      recordId: null,
      competitionId: null,
      competitionData: {},
      isRecord: false,
      infoItemList: [
        { label: '赛事类型', prop: 'type' },
        { label: '赛事级别', prop: 'level' },
        { label: '状态', prop: 'status' },
        { label: '举办时间', prop: 'eventTime' },
        { label: '地址', prop: 'location' },
        { label: '描述', prop: 'description' },
        { label: '报名开始时间', prop: 'startTime' },
        { label: '报名结束时间', prop: 'endTime' },
        { label: '报名方式', prop: 'mode' },
        { label: '最大报名数', prop: 'maxTeamSize', class: 'half' },
        { label: '最小报名数', prop: 'minTeamSize', class: 'half' },
        { label: '最大年龄', prop: 'ageMax', class: 'half' },
        { label: '最小年龄', prop: 'ageMin', class: 'half' },
      ],
      typeObj: { 1: '体育竞技', 2: '电子竞技', 3: '文化才艺' },
      levelObj: { 1: '市级', 2: '区级' },
      statusObj: { 0: '未开始', 1: '进行中', 2: '已结束' },
      modeObj: { 1: '个人', 2: '团队' },
    };
  },
  computed: {
    ...mapGetters(['userId']),
  },
  created() {
    if (this.$route?.query?.id) this.competitionId = this.$route.query.id;
    if (this.$route?.query?.recordId) this.recordId = this.$route.query.recordId;
    this.getData();
  },
  methods: {
    async getData() {
      try {
        this.dataLoading = true;
        const { data } = await api.getCompetitionsInfo(this.competitionId);
        this.competitionData = data;
        // const recordRes = await api.getGiftRecordList({ collectId: this.collectId, userId: this.userId });
        // this.isRecord = recordRes.rows.length ? true : false;
        this.dataLoading = false;
      } catch (error) {
        console.log(error);
      }
    },
    toRegister() {
      this.$router.push({
        name: 'ActivityRegisterRegister',
        query: {
          competitionId: this.competitionId,
          recordId: this.recordId || '',
          status: this.competitionData.status,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content-box {
  width: calc(100% - 30px);
  height: calc(100% - 70px);
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
}

.card {
  border-radius: 10px;
  padding: 15px;
  background-color: #fff;

  &.info {
    flex: 1;
    overflow: auto;

    ::v-deep .el-scrollbar__view {
      & > div {
        margin-top: 20px;
      }
    }
  }

  &.register {
    flex-shrink: 0;
    margin-top: 10px;
    display: flex;
    justify-content: end;

    .btn {
      padding: 7px 30px;
      border-radius: 20px;
      background-color: #165dff;
      color: #fff;
      cursor: pointer;

      &.disabled {
        background-color: #a0cfff;
        pointer-events: none;
        cursor: not-allowed;
      }
    }
  }
}

.banner {
  width: 100%;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #3d3d3d;
}

.info-box {
  display: flex;
  flex-wrap: wrap;

  .info-item {
    width: 100%;
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;

    &.half {
      width: 50%;
    }

    .label {
      margin-bottom: 10px;
      color: #9a9a9a;

      .svg-icon {
        font-size: 16px;
      }
    }

    .value {
      margin-left: 20px;
      color: #3b3b3b;
    }
  }
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #165dff;
}

.introduce-box {
  .introduce-title {
    border-left: 3px solid #165dff;
    padding-left: 10px;
    margin-bottom: 15px;
  }
}
</style>
